<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>升级</title>
</head>
<body>

<script src="../node_modules/d3/build/d3.js"></script>
<script>
  const width = 400, height = 400,
    data = [63, 55, 88, 79, 95, 72],
    padding = {right: 20, left: 30, top: 20, bottom: 20};

  // 1.添加画布svg
  let svg = d3.select('body').append('svg')
    .attr('width', width).attr('height', height)
    .attr('transform', `translate(100,100)`)
    .style('border', '1px solid red');


  // 2.创建x和y轴
  let xScale = d3.scaleBand()
    .domain(d3.range(data.length))
    .range([0, width - padding.left - padding.right]);

  let yScale = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([height - padding.top - padding.bottom, 0]);
  // let yScale2 = d3.scaleLinear()
  //   .domain([0, d3.max(data)])
  //   .range([0,height - padding.top - padding.bottom]);

  let xAxis = d3.axisBottom(xScale);
  let yAxis = d3.axisLeft(yScale);

  //3.画图
  const rectPadding = 4;
  svg.selectAll('rect').data(data).enter().append('rect')
    .attr('x', function (d, i) {
      return xScale.bandwidth() * i + rectPadding / 2 + padding.left;
    })
    .attr('y', function (d, i) {
      return yScale(d) + padding.top;
    })
    .attr('width', xScale.bandwidth() - rectPadding)
    .attr('height', function (d, i) {
      return height - padding.top - padding.bottom - yScale(d);
      // return yScale2(d);
    })
    .attr('fill', 'orange');

  //4.画文字
  svg.selectAll('.myText').data(data).enter().append('text')
    .attr('class', 'myText')
    .attr('x', function (d, i) {
      return xScale.bandwidth() * i + rectPadding / 2 + padding.left;
    })
    .attr('y', function (d, i) {
      return yScale(d) + padding.top;
    })
    .attr('dx', function (d, i) {  // 字体居中
      return xScale.bandwidth() / 2 - rectPadding-8;
    })
    .attr('dy', function (d, i) {
      return 20;
    })
    .text(function (d) {
      return d;
    });

  //5. x和y轴
  svg.append('g').call(xAxis)
    .attr('transform', `translate(${padding.left},${height - padding.bottom})`);
  svg.append('g').call(yAxis)
    .attr('transform', `translate(${padding.left}, ${padding.top})`);


</script>


</body>
</html>